@tailwind components;

@layer components {
  /* Typography */
  .title-screen-regular {
    @apply font-normal text-[2rem]/10;
  }

  .title-screen-bold {
    @apply font-bold text-[2rem]/10;
  }

  .title-section-regular {
    @apply font-normal text-[1.625rem]/8;
  }

  .title-section-bold {
    @apply font-bold text-[1.625rem]/8;
  }

  .title-subsection-regular {
    @apply font-normal text-[1.375rem]/7;
  }

  .title-subsection-bold {
    @apply font-bold text-[1.375rem]/7;
  }

  .title-body-regular {
    @apply font-normal text-lg/6;
  }

  .title-body-bold {
    @apply font-bold text-lg/6;
  }

  .body-regular {
    @apply font-normal text-base;
  }

  .body-bold {
    @apply font-bold text-base;
  }

  .body-small-regular {
    @apply font-normal text-sm;
  }

  .body-small-bold {
    @apply font-bold text-sm;
  }

  .callout-regular {
    @apply font-normal text-sm;
  }

  .callout-bold {
    @apply font-bold text-sm;
  }

  .link-large-regular {
    @apply font-normal text-base;
  }

  .link-regular {
    @apply font-normal text-sm;
  }

  /* Form Controls */
  .input-box {
    /* Using shadows to increase border size without impacting the surroundings */
    @apply outline-none
    rounded-[10px]
    bg-transparent

    /* border */
    /* border-primary-border  */
    /* shadow-[0_0_0_1px_#5d636f]  */

    /* hover:border-2 */
    /* hover:border-primary-border-hover */
    enabled:hover:shadow-[0_0_0_2px_#FF6FC8]

    /* focus:border-[3px] */
    /* focus:border-primary-border-accent */
    focus:!shadow-[0_0_0_3px_#E81899];
  }

  .input-box.withValidation {
    @apply outline-none;
  }

  .input-box.error {
    @apply !shadow;
    box-shadow: 0 0 0 3px var(--negative-sentiment) !important;
  }

  .input-box.success {
    box-shadow: 0 0 0 3px var(--positive-sentiment) !important;
  }

  .input-box.warning {
    box-shadow: 0 0 0 3px var(--warning-sentiment) !important;
  }

  .input-box.neutral {
    box-shadow: 0 0 0 1px var(--primary-border-dark) !important;
  }

  /* Tooltip */
  .dialog-tooltip {
    @apply rounded-[10px]
      w-[283px]
      p-[24px]
      bg-neutral-background
      text-primary-content
      box-shadow-small;

    letter-spacing: 0.14px;

    > div:first-of-type {
      @apply title-body-bold;
      padding-bottom: 8px;
    }
  }

  .dialog-tooltip-top {
    :before {
      content: '';
      position: absolute;
      height: 0px;
      width: 0px;
      top: 100%;
      left: 133px; /* (283px - 9px)/2 - 4px */
      border-width: 9px;
      border-color: transparent transparent transparent;
      border-style: solid;
      border-top: 9px solid var(--neutral-background);
    }
  }

  /* Separators */
  .h-sep {
    @apply divider h-[1px] border-divider-border;
  }

  .v-sep {
    @apply divider divider-horizontal w-[1px] border-divider-border;
  }

  /* Links and buttons */
  .link {
    @apply link-regular text-primary-link underline hover:text-primary-link-hover;
  }

  .status-btn {
    @apply px-[20px]
      py-2
      rounded-full
      bg-transparent

      /* primary-interactive[#C8047D => pink-500] */
      shadow-[0_0_0_1px_#C8047D]

      /* primary-interactive-accent[#E81899 => pink-400] */
      hover:shadow-[0_0_0_2px_#E81899];
  }

  /* Other components */
  .overlay-backdrop {
    @apply modal-backdrop bg-overlay-background rounded-xl z-30;
  }

  .overlay-dialog {
    background-color: var(--overlay-dialog);
  }

  .chainselector {
    @apply /* background: var(--interactive-dark-tertiary, #444A55); */
    hover:background-color: var(--interactive-dark-tertiary-hover, #5D636F);
  }

  .glassy-gradient-card::before {
    @apply glassy-background;
    content: '';
    position: absolute;
    inset: 0%;
    z-index: -1;
  }

  input {
    border: 1px solid var(--primary-border);
  }

  h1 {
    color: var(--primary-content);
    text-align: center;
    /* Title Section/Bold */
    font-family: 'Clash Grotesk', sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 123.077% */
    letter-spacing: -0.39px;
  }

  h2 {
    color: var(--primary-content);
    font-family: 'Clash Grotesk', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 133.333% */
    letter-spacing: 0.09px;
    margin-bottom: 8px;
  }

  button:disabled {
    cursor: not-allowed;
  }

  input:disabled {
    cursor: not-allowed;
  }

  .radio {
    border: 1px solid var(--primary-border-dark);
    &:checked {
      border: 1px solid var(--primary-interactive-accent);
    }
  }

  /* TODO: add more components here */
}
